<template>
  <div  class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['super:team:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['super:team:remove']"
        >删除</el-button>
      </el-col>
    </el-row>
    <el-card>
      <el-table v-loading="loading" :data="superTeamSupplier"  @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="产品优势id" align="center" prop="superiorityId" />
        <!--        <el-table-column label="供应商名称" align="center" prop="supplierName" />-->
        <el-table-column label="产品图片" width="400" align="center" prop="superiorityUrl" >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.superiorityUrl"
              @click="getBigCertificateUrl(scope.row)"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="是否展示" align="center" width="400px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.superiorityState"
                       active-value="0"
                       inactive-value="1"
                       @change="handleStatusChange(scope.row)"
                       active-text="启用"
                       inactive-text="禁用"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="400">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['super:team:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"  />
      <!-- 添加产品优势 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="图片URL" prop="superiorityUrl">
            <el-upload
              class="upload-demo"
              :http-request="upload"
              action="aaa"
              accept=".jpg,.png"
              :limit="1"
              :file-list="InfoImgList"
              :on-remove="handleRemoveInfoImage"
              :before-remove="beforeRemoveInfo"
              :on-error="handleError"
              ref="upload">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">仅支持jpg,png格式,以最新上传为准</div>
            </el-upload>

            <!--<el-input v-model="formPic.picUrl" placeholder="请输入图片URL" />-->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormPic">确 定</el-button>
          <el-button @click="cancelPic">取 消</el-button>
        </div>
      </el-dialog>

    </el-card>

  </div>
</template>

<script>
  import {
    getProductSuperiority,
    addProductSuperiority,
    updateProductSuperiority,
    deleteProductSuperiority
  }from "@/api/super/productSuperiority"
  import {uploadImage} from "@/api/shopping/product";
  export default {
    name: "index",
    data() {
      return {
        //点击次数
        active: 0,
        //添加修改图片
        InfoImgList:[],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 分类表格数据
        superTeamSupplier: null,
        // 弹出层标题
        title: "",

        // 表单参数
        form: {},
        //修改流程表单参数

        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 状态数据字典
        statusOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        defaultProps: {
          children: "children",
          label: "label",
        },
        dialogCertificateUrlList:[],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /* 查询类别列表 **/
      getList(){
        this.loading = true;
        getProductSuperiority().then(response => {
          this.superTeamSupplier = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 提交按钮 */
      submitFormPic() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            console.log(this.form);
            addProductSuperiority(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });

          }
        });

      },
      cancelPic(){
        this.open = false;
        this.reset();
      },
      //产品信息图片上传
      upload(param){
        let file = param.file;
        let fileType = file.type;
        let isLt2M = file.size / 1024 / 1024 < 500;
        if (!isLt2M) {
          this.$message.error("上传大小大小必须小于500M");
          this.fileList=[];
          return;
        }
        let form = new FormData();
        form.append("file", file);
        uploadImage(form).then((res)=>{
          if(res.code==200){
            this.form.superiorityUrl = "http://51jhf.com/profile/xiazai/"+res.filePath;
          }
          // console.log(res);
        })
      },
      beforeRemoveInfo(file, InfoImgList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },

      //上传异常
      handleError(err, file, fileList){
        this.$message.error("上传失败");
      },

      handleStatusChange(row){
        console.log(row)
        let text = row.superiorityState === "0" ? "启用" : "停用";
        this.$confirm(
          '确认要' + text + '"' + row.superiorityId + '"吗?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return updateProductSuperiority(row.superiorityId,row.superiorityState);
          })
          .then(() => {
            this.msgSuccess(text + "成功");
          })
          .catch(function () {
            row.superiorityState = row.superiorityState === "0" ? "1" : "0";
          });
      },
      /*getTeamType(row){
        this.$router.push({path:"/superTeamSupplier/superTeam",query:{cooperativeId:row.cooperativeId}});
      },*/
      // 查看企业logo
      getBigCertificateUrl(row){
        this.dialogCertificateUrlList.push(row.superiorityUrl);
      },
      //添加
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加产品图片";
      },

      // 表单重置
      reset() {
        this.form = {
          superiorityId: null,
          superiorityUrl: null,
          superiorityState: null,
        };
        this.resetForm("form");
      },
      //取消
      cancel() {
        this.open = false;
        this.reset();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.superiorityId)
        console.log(this.ids);
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const superiorityIds = row.superiorityId || this.ids;
        this.$confirm('是否确认删除id为"' + superiorityIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return deleteProductSuperiority(superiorityIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
      },

    }
  }
</script>

<style scoped>

</style>
